var layer = layui.layer;
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;

$('.add').on('click', function () {
  var index = layer.open({
    type: 1,
    title: '添加类别',
    content: add_str,
    area: ['500px', '250px'],
    success: function () {
      $('.add-form').on("submit", function (ev) {
        ev.preventDefault();
        addCateAPI($(".add-form").serialize(), function (res) {
          $('.layui-table tbody').empty();
          load();
          layer.close(index)
        })
      })
    }
  })
})
//铺设页面数据
function load() {
  cateListAPI({}, function (res) {
    $('.layui-table tbody').empty()
    res.data.data.forEach(function (obj) {
      var thetr = `<tr>
      <td>${obj.name}</td>
      <td>${obj.alias}</td>
      <td>
        <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>

        <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
      </td>
    </tr>`;
      $('.layui-table tbody').append(thetr);
    });
  })
}
load();



//事件委托-点击删除事件
$('.layui-table tbody').on('click', '.delete', function (ev) {
  deiCateAPI({ id: $(this).attr('myid') }, function (res) {
    $(ev.target).parents('tr').remove()
  })
})


var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;

$('tbody').on('click', '.edit', function (ev) {
  var index = layer.open({
    type: 1,
    title: '编辑类别',
    content: edit_str,
    area: ['500px', '250px'],
    success: function () {
      var myid = $(ev.target).attr('myid');
      var name = $(ev.target).attr('data-name');
      var alias = $(ev.target).attr('data-alias');

      $('.add-form input[name=name]').val(name);
      $('.add-form input[name=alias]').val(alias);
      $('.add-form input[name=Id]').val(myid);
      $('.add-form').on("submit", function (ev) {
        ev.preventDefault();
        upCateAPI($(".add-form").serialize(), function (res) {
          load();
          layer.close(index)
        })
      })
    }
  })
})
